<template>
<div style="background-color: white;width: 1500px;margin: auto">
    <Header headerClass="home-div" style="margin-bottom: 20px"/>
    <div style="width: 1260px; margin: auto;min-height: 100vh">
        <!--类别标签-->
        <div class="nav_grid" >
            <div v-for="item in parentCategory">
                <el-button text @click="getCategoryVideo(item.id)">{{item.name}}</el-button>
            </div>
        </div>
        <!--轮播图-->
        <div class="home-bottom-grid" v-infinite-scroll="load" >
            <div class="box" >
                <el-carousel indicator-position="outside" style="border-radius: 5px">
                    <el-carousel-item v-for="item in lunboArr">
                        <img :src="item.imgUrl" alt="图片错误" width="492">
                    </el-carousel-item>
                </el-carousel>
            </div>
            <!--视频-->
            <div class="video_grid" v-for="item in videoArr">
                <router-link :to="'/detail?id='+item.id">
                    <div style="width: 100%;height: 100%">
                        <div style="height: 133px;border-radius: 5px;overflow: hidden; ">
                            <img :src="item.coverUrl" class="gallery__img" alt="封面图片损坏" style="width:100%">
                        </div>
                        <p class="title_p">{{ item.title }}</p>
                    </div>
                </router-link>
            </div>

        </div>
    </div>

</div>
</template>

<script setup>

import {onMounted, ref} from 'vue'
import Header from '@/components/Header.vue'
import axios from "axios";
import {ElMessage} from "element-plus";
import SimpleAxios from "@/http/request/SimpleAxios";
import router from "@/router";

const lunboArr = ref([
    {imgUrl:'lunbo/lunbo1.png'},
    {imgUrl:'lunbo/lunbo2.png'},
    {imgUrl:'lunbo/lunbo3.png'},
    {imgUrl:'lunbo/lunbo4.png'},
]);

const pageNum = ref(0);

const videoArr=ref([])

const parentCategory=ref([])

const sonCategory = ref([])

const getCategoryVideo = (id)=>{
    router.push('/categoryVideo?id='+id)
}

const getCategory =()=>{
    SimpleAxios.get("http://124.71.182.39:26000/categories")
        .then((response)=>{
            if (response.state==20000){
                // parentCategory.value=response.data;
                // console.log(response.data)
                response.data.forEach((item)=>{
                    if(item.isParent==1){
                        parentCategory.value.push(item)
                    }else {
                        sonCategory.value.push(item)
                    }
                })
            }
        })
}
onMounted(()=>{
    getCategory();
})
const load = () => {

    if (videoArr.value.length > 0 && videoArr.value.length % 16 !== 0) {
        // 如果视频数组长度不是4的倍数，说明数据库中没有更多数据了，停止发送请求
        return;
    }

    pageNum.value++;
    axios.get('http://124.71.182.39:26000/video/'+pageNum.value)
        .then((response)=>{
            if (response.data.state===20000){
                if (response.data.data.length === 0) {
                    // 数据库中没有更多数据了，停止发送请求
                    return;
                }
                // videoArr.value += response.data.data;
                videoArr.value = videoArr.value.concat(response.data.data);
            }else {
                ElMessage.error(response.data.message)
            }
        })
}

onMounted(()=>{
    load();
})
</script>
<style scoped>
a {
    text-decoration: none; /* 去掉下划线 */
    color: inherit; /* 继承父元素的颜色，保持与文本颜色一致 */
    transition: color 1s; /* 设置颜色过渡效果，持续时间为 2 秒 */
}

a:hover {
    color: #15b6ea; /* 鼠标悬浮时变为蓝色 */
}
.title_p {
    font-weight: bold;
    line-height: 1.3;
    margin: 10px 0 ;
    height: 40px;
    overflow: hidden; /*超出不显示*/
    /*设置省略号相关样式*/
    display: -webkit-box;
    -webkit-line-clamp: 2; /*设置行数*/
    -webkit-box-orient: vertical; /*纵向*/
}

.video_grid{
    text-align: left;
    height: 220px;
}
.home-bottom-grid{
    width: 230px;
    line-height: 40px;
    /* 声明一个容器 */
    display: grid;
    /*  声明列的宽度  */
    grid-template-columns: repeat(5, 236px);
    /*  声明行间距和列间距  */
    grid-gap: 20px;
    /*  声明行的高度  */
    grid-template-rows: 220px 220px;
}
.box{
    grid-area: 1 / 1 / 3/ 3;
    background-color: #636b40;
    height: 375px;
    border-radius: 5px;
}
.nav_grid{
    width: 840px;
    line-height: 35px;
    margin-bottom: 20px;
    /* 声明一个容器 */
    display: grid;
    /*  声明列的宽度  */
    grid-template-columns: repeat(5, 160px);
    /*  声明行间距和列间距  */
    grid-gap: 10px;
    /*  声明行的高度  */
    grid-template-rows: 35px;
}
.el-carousel__item img {
    display: flex;
    color: #475669;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
}

.el-carousel__item:nth-child(2n) {
    background: linear-gradient(45deg, #88e1d6, #bf9be3);
}

.el-carousel__item:nth-child(2n + 1) {
    background: linear-gradient(45deg,  #88e1d6, #bf9be3);
}
</style>